<template>

	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<br>

				<u-row customStyle="margin-bottom: 10px">
					<u-col span="0.5">
						<view class="demo-layout bg-purple"></view>
					</u-col>

					<u-col span="11">
						<!-- <u--input placeholder="前置插槽">
									
										<u--text
											text="http://"
											slot="prefix"
											margin="0 3px 0 0"
											type="tips"
										></u--text>
		
									</u-input> -->
						<u-skeleton :loading="loading" animate rows=4 titleWidth=70% titleHeight=30 rowsHeight=30>
							<u-input placeholder="请输入内容" disabled border="surround" v-model="product_category_name"
								@change="change" customStyle="margin-bottom: 15px">
								<u--text text="维护类型:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
							<div v-if="type1==1">
								<u-input placeholder="请输入内容" disabled border="surround" v-model="NumberCode"
									@change="change" customStyle="margin-bottom: 15px">
									<u--text text="车牌号:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
								</u-input>
							</div>
							<div v-else>
								<u-input placeholder="请输入内容" disabled border="surround" v-model="Equipment"
									@change="change" customStyle="margin-bottom: 15px">
									<u--text text="设备编号:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
								</u-input>
							</div>

							<u-input placeholder="请输入内容" disabled border="surround" v-model="org" @change="change"
								customStyle="margin-bottom: 15px">
								<u--text text="组织名:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
							<u-input placeholder="请输入内容" disabled border="surround" v-model="userid" @change="change"
								customStyle="margin-bottom: 15px;">
								<u--text text="维护人工号:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
							<!-- <u--text type="info" text="姓名:" customStyle="margin-bottom: 10px;"></u--text> -->
							<u-input placeholder="请输入内容" disabled border="surround" v-model="name" @change="change"
								customStyle="margin-bottom: 15px">
								<u--text text="维护人姓名:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
							<u--text type="info" text="请选择维护等级" customStyle="margin-bottom: 10px"></u--text>
							<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
								<u-radio :customStyle="{marginBottom: '11px'}" v-for="(item, index) in radiolist1"
									:key="index" :label="item.name" :name="item.category" :disabled="item.disabled"
									@change="radioChange">
								</u-radio>
							</u-radio-group>
							<br>
							<div v-if="category==4">
								<u-input placeholder="请输入内容" disabled border="surround" v-model="create_time"
									@change="change" customStyle="margin-bottom: 15px">
									<u--text text="报修时间:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
								</u-input>
								<div style="position: relative;">
									<u-input placeholder="请输入内容" border="surround" v-model="search" @change="search1"
										 customStyle="margin-bottom: 15px">
										<u--text text="报修项目:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
									</u-input>
									<div v-if="search1list.length>0"
										style="position: absolute;opacity: 1.0;z-index: 10;background-color: white;top: 2.4rem;left: 5rem;">
										<u--text v-for="(item, index) in search1list" @click="searchselect(item)"
											:text="item" slot="prefix" margin="0 3px 0 0" type="tips"
											style="margin-bottom:7px"></u--text>
									</div>
								</div>
								<u--text type="info" text="数量:" customStyle="margin-bottom: 10px"></u--text>
								<u-number-box v-model="quantity" @change="valChange" ></u-number-box>
								<u--text type="info" text="问题描述:" customStyle="margin-bottom: 10px"></u--text>
								<u--textarea v-model="describe" :required="true" placeholder="请输入内容"
									customStyle="margin-bottom: 15px"></u--textarea>
								<u--text type="info" text="问题图片" customStyle="margin-bottom: 10px"></u--text>
								<htz-image-upload :sourceType="['album', 'camera']" :max="1" v-model="ceshiData1"
									@uploadSuccess="ceshiUploadSuccess1" mediaType="image"
									action="https://wdzbx.zsbike.com.cn:10787/api.v1/Upload"></htz-image-upload>
								
								<div style="position: relative;margin-top: 10px;">
									<u-input placeholder="请输入内容" border="surround" v-model="search2" @change="searchagain"
										 customStyle="margin-bottom: 15px">
										<u--text text="维修项目:" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
									</u-input>
									<div v-if="search2list.length>0"
										style="position: absolute;opacity: 1.0;z-index: 10;background-color: white;top: 2.4rem;left: 5rem;">
										<u--text v-for="(item, index) in search2list" @click="searchselect2(item)"
											:text="item" slot="prefix" margin="0 3px 0 0" type="tips"
											style="margin-bottom:7px"></u--text>
									</div>
								</div>
								<u--text type="info" text="故障描述:" customStyle="margin-bottom: 10px"></u--text>
								<u--textarea v-model="warn" placeholder="请输入内容"
									customStyle="margin-bottom: 15px"></u--textarea>
								<u--text type="info" text="维修图片" customStyle="margin-bottom: 10px"></u--text>
								<htz-image-upload :sourceType="['album', 'camera']" :max="1" v-model="ceshiData2"
									@uploadSuccess="ceshiUploadSuccess2" mediaType="image"
									action="https://wdzbx.zsbike.com.cn:10787/api.v1/Upload"></htz-image-upload>
									<u--text type="info" text="是否更换配件:" customStyle="margin-top: 10px;margin-bottom: 10px"></u--text>
									  <u-radio-group
									    v-model="replace"
									    placement="row"
									    @change="groupChange"
									  >
									    <u-radio
									      customStyle="margin-bottom: 12px;margin-right:15px"
									      v-for="(item, index) in radiolist3"
									      :key="index"
									      :label="item.name"
									      :name="item.replace"
									      @change="radioChange3"
									    >
									    </u-radio>
									  </u-radio-group>
									  <div v-if="replace>0">
										  <u--text type="info" text="请上传更换设备的图片" customStyle="margin-bottom: 10px"></u--text>
										  <htz-image-upload :sourceType="['album', 'camera']" :chooseNum="10" :max="10" v-model="ceshiData3"
										  	@uploadSuccess="ceshiUploadSuccess3" mediaType="image"
										  	action="https://wdzbx.zsbike.com.cn:10787/api.v1/Upload"></htz-image-upload>
									  </div>
									<u--text type="info" text="处理情况:" customStyle="margin-top: 10px;margin-bottom: 10px"></u--text>
									  <u-radio-group
									    v-model="condition"
									    placement="row"
									    @change="groupChange"
									  >
									    <u-radio
									      customStyle="margin-bottom: 12px;margin-right:15px"
									      v-for="(item, index) in radiolist2"
									      :key="index"
									      :label="item.name"
									      :name="item.condition"
									      @change="radioChange2"
									    >
									    </u-radio>
									  </u-radio-group>
								<u-button type="primary" text="确定" @click="referfinish"></u-button>
							</div>
							<div v-else>
								<u--text type="info" text="备注(选填)" customStyle="margin-bottom: 10px"></u--text>
								<u--textarea v-model="notes" placeholder="请输入内容" customStyle="margin-bottom: 10px" autoHeight ></u--textarea>
								<u--text type="info" text="上传图片" customStyle="margin-bottom: 10px"></u--text>
								<htz-image-upload :sourceType="['album', 'camera']" :max="1" v-model="ceshiData"
									@uploadSuccess="ceshiUploadSuccess" mediaType="image"
									action="https://wdzbx.zsbike.com.cn:10787/api.v1/Upload"></htz-image-upload>
								<u-button type="primary" text="确定" @click="refer"></u-button>
							</div>
						</u-skeleton>
						<view>
							<u-toast ref="uToast"></u-toast>
						</view>
					</u-col>
					<u-col span="0.5">
						<view class="demo-layout bg-purple-dark"></view>
					</u-col>
				</u-row>


			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}

	.main-box {
		display: flex;
		margin: 20rpx;
		justify-content: space-between;
		background: #f7f7f7;
		padding: 30rpx;
	}

	// .bg-purple {
	//     background: #CED7E1;
	// }

	// .bg-purple-light {
	//     background: #e5e9f2;
	// }

	// .bg-purple-dark {
	//     background: #99a9bf;
	// }
</style>
<script>
	$(function() {
		var availableTags = '/index.php/index/index/category1?rank={$data.rank|htmlentities}';
		$("#tags").autocomplete({
			source: availableTags
		});
	});
</script>
<script>
	// import $ from 'jquery'
	// import '@/node_modules/jquery/dist/jquery.min.js'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import store from '@/store/index.js'	
	export default {
		data() {
			return {
				show: false,
				list: [{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "请完整填写表单内容",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'success',
						title: '成功主题(带图标)',
						message: "提交成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					},
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "上传失败",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "提交失败，内部服务器错误",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "请选择完成情况",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "该设备当天不能重复提交维护单据",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
				],
				sever:store.state.sever,
				quantity:1,
				value4:'已完成',
				search: '',
				search2: '',
				search1list: [],
				search2list: [],
				value: '',
				index: '',
				// fileList2: [],
				delivery_asn: '',
				status: "",
				is: "",
				disabled: true,
				product_name: "",
				product_category_name: "",
				userid: uni.getStorageSync("userinfo.userid"),
				name: uni.getStorageSync("userinfo.nickname"),
				create_time: "",
				ceshiData: [],
				ceshiData1: [],
				ceshiData2: [],
				ceshiData3: [],
				condition: '',
				vedio: "",
				loading: '',
				id: '',
				repairData1:'',
				repairData2:'',
				repairData3:'',
				// ceshiData1: [],
				uniCloudData: [],
				Equipment: '',
				NumberCode: '',
				org: '',
				type1: '',
				type2: '',
				notes:'',
				category:1,
				safeguardData: '',
				warn:'',
				describe:'',
				off:'',
				radiolist1: [{
						name: '一级维护',
						disabled: false,
						type: 1,
						category:1,
					},
					{
						name: '二级维护',
						disabled: false,
						type: 2,
						category:2,
					},
					{
						name: '故障报修',
						disabled: false,
						type: 4,
						category:4,
					},{
						name: '外修-报修',
						disabled: false,
						type: 5,
						category:5,
					}
				],
				radiovalue1: 1,
				radiolist2: [{
						name: '已完成',
						disabled: false,
						condition:1,
					},
					{
						name: '待件',
						disabled: false,
						condition:2,
					},
				],
				replace:1,
				radiolist3: [{
						name: '是',
						disabled: false,
						replace:1,
					},
					{
						name: '否',
						disabled: false,
						replace:0,
					},
				],
				condition: 1,
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				// radiovalue1: '香蕉',这是默认选项
			}
		},
		computed: {
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			},
		},
		components: {
			htzImageUpload,
		},
		onLoad(option) {
			console.log(store.state.isLogin);
			console.log(option);
			this.userid=store.state.userinfo.userid;
			this.name=store.state.userinfo.nickname;
			if (typeof(this.userid) == "undefined" || this.userid == '' || this.userid == null) {
				this.userid = option.userId;
			}
			if (typeof(this.name) == "undefined" || this.name == '' || this.name == null) {
				this.name = option.userName;
			}
			this.off=this.$route.query.off
			this.Equipment = decodeURI(option.Equipment);
			this.org = option.org;
			this.type1 = option.type1;
			this.NumberCode = option.Number;
			this.create_time = uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd hh:MM');
			this.start();
		},
		mounted() {
			this.loading = false
		},
		methods: {
			search1(e) {
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/search1', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						query: e,
						rank: 5,
					},
					success: (res) => {
						if (res.data.Status == 1) {
							this.search1list = res.data.Data;
							// console.log(this.search1list);
						} else {
							this.search1list = [];
						}
					}
				});
			},
			searchagain(e) {
				var params = e.split(',');
				var query
				 // console.log(params.length);
				 // console.log(params);
				if(params.length>1){
					query = params[params.length-1]
				}else{
					query = e
				}
				// console.log(query);
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/search2', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						query: query,
						rank: 5,
					},
					success: (res) => {
						if (res.data.Status == 1) {
							this.search2list = res.data.Data;
							// console.log(this.search2list);
						} else {
							this.search2list = [];
						}
					}
				});
			},
			searchselect(e) {
				this.search = e;
				this.search1list = [];
			},
			searchselect2(e) {
				console.log(e);
				console.log(33);
				if(e==""||e==null||e==undefined){
					this.search2 = e;
				}else{
					var params = this.search2.split(',');
					if(params.length<=1){
						this.search2=e+",";
					}else{
						params[params.length-1]=e;
						this.search2 = params.join(',');
						this.search2 = this.search2+",";
					}
				}
				this.search2list = [];
			},
			checklogin() {
				var userid = uni.getStorageSync("userid");
				this.userid = userid;
				if (typeof(userid) == "undefined" || userid == '' || userid == null) {
					console.log("未登录");
				}
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},

			start() {
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/safeguard', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						type2: this.type2,
						Equipment: this.Equipment,
						Number: this.NumberCode,
						org: this.org,
						type1: this.type1,
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						this.Equipment = res.data.Data.equipment;
						this.org = res.data.Data.org_name;
						this.NumberCode = res.data.Data.number;
						if (this.type1 == "1") {
							this.product_category_name = "车辆维护";
							//this.radiolist1[2].disabled = true;
						} else {
							this.product_category_name = "站台维护";
						}
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			referfinish(){
				if (typeof(this.describe) == "undefined" || this.describe == '' || this.describe == null) {
					this.showToast(this.list[0]);
					return;
				};
				if (typeof(this.search) == "undefined" || this.search == '' || this.search == null) {
					this.showToast(this.list[0]);
					return;
				};
				if (typeof(this.search2) == "undefined" || this.search2 == '' || this.search2 == null) {
					this.showToast(this.list[0]);
					return;
				}
				if (typeof(this.condition) == "undefined" || this.condition == '' || this.condition == null) {
					this.showToast(this.list[0]);
					return;
				}
				if (typeof(this.warn) == "undefined" || this.warn == '' || this.warn == null) {
					this.showToast(this.list[0]);
					return;
				}
				if(this.ceshiData3.length>0&&this.replace>0){
					this.repairData3 = this.ceshiData3.join(",") ;
				}else{
					this.repairData3='';
				}
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/ReferFinish',
					method: 'GET',
					data: {
						number: this.NumberCode,
						equipment: this.Equipment,
						userid: this.userid,
						name: this.name,
						repair: this.userid,
						repairer: this.name,
						category:this.category,
						org:this.org,
						rank: 5,
						warn:this.warn,
						describe:this.describe,
						search:this.search,
						search2:this.search2,
						repairData1:this.repairData1,
						repairData2:this.repairData2,
						replace_img:this.repairData3,
						condition:this.condition,
						quantity:this.quantity,
						replace:this.replace,
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						if (res.data.Status==1) {
							this.showToast(this.list[1]);
							if (this.off ==1){
								uni.navigateTo({
									url: "/pages/index/code"
								});
							}else{
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1000)
							}
						} else if(res.data.Status==2) {
							this.showToast(this.list[4])
						}else{
							this.showToast(this.list[2])
						}
					}
				});
			},
			refer() {
				if (this.ceshiData[0] == undefined) {
					this.showToast(this.list[0]);
					// alert("请上传视频");
				} else {
					uni.request({
						url: 'https://wdzbx.zsbike.com.cn:10787/api.v1/Take',
						method: 'GET',
						data: {
							number: this.NumberCode,
							equipment: this.Equipment,
							userid: this.userid,
							name: this.name,
							category:this.category,
							org:this.org,
							rank: this.type1,
							img:this.vedio,
							notes:this.notes,
						},
						header: {
							'custom-header': 'hello' //自定义请求头信息
						},
						success: (res) => {
							if (res.data.Status==1) {
								this.showToast(this.list[1]);
								if (this.off ==1){
									uni.navigateTo({
										url: "/pages/index/code"
									});
								}else{
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 1000)
								}
							} else if (res.data.Status==5) {
								this.showToast(this.list[5])
							}else{
								this.showToast(this.list[2])
							}
						}
					});
				}

			},
			change(e) {
				this.search1list = [];
			},
			ceshiUploadSuccess(res) { //上传成功
				/****************
				因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
				***************/
				this.ceshiData = [];
				var _res = JSON.parse(res.data);
				console.log(_res.url);
				this.vedio = _res.url;
				this.ceshiData.push(this.sever+_res.url);
				// if (_res.code == 200) {
				//     this.ceshiData.push(_res.result);
				// }
				/*******************************/
			},
			ceshiUploadSuccess1(res) { //上传成功
				this.ceshiData1 = [];
				var _res = JSON.parse(res.data);
				console.log(_res.url);
				this.repairData1 = _res.url;
				this.ceshiData1.push(this.sever+_res.url);
			},
			ceshiUploadSuccess2(res) { //上传成功
				this.ceshiData2 = [];
				var _res = JSON.parse(res.data);
				console.log(_res.url);
				this.repairData2 = _res.url;
				this.ceshiData2.push(this.sever+_res.url);
			},
			ceshiUploadSuccess3(res) { //上传成功
				var _res = JSON.parse(res.data);
				console.log(_res.url);
				this.repairData3 = _res.url;
				this.ceshiData3.push(this.sever+_res.url);
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				this.category = n;
			},
			radioChange2(n) {
				this.condition = n;
			},
			radioChange3(n) {
				this.replace = n;
			},
			valChange(e){
				console.log('当前值为: ' + e.value);
			},
		}
	}
</script>